<script setup>
import { Delete, EditPen } from '@element-plus/icons-vue'
import { ref, reactive } from 'vue'
import {
    communicationListPage,
    communicationAdd,
    communicationUpdate,
    communicationDel,
    dataPushtest,
} from '@/assets/api/api'
// import { showLoading } from '@/assets/js/loading'
import { ElMessage, ElMessageBox } from 'element-plus'
import messageList from '@/components/video/noticeList.vue'
const noticeList = ref([])
const currentPage = ref(1)
const pageSize = 9
const total = ref(0)
const filterForm = reactive({
    page: currentPage,
    limit: pageSize,
})
const noData = ref(false)
const getData = () => {
    // showLoading()
    communicationListPage({
        ...filterForm,
    }).then((res) => {
        noticeList.value = res.data.Items
        total.value = res.data.totalSize
        noData.value = total.value == 0 ? true : false
    })
}
getData()
const handleCurrentChange = (e) => {
    currentPage.value = e
    getData()
}
const searchData = () => {
    getData()
}
const messageListVisible = ref(false)
const noticeData = ref()
const handleCommand = (item) => {
    noticeData.value = item
    messageListVisible.value = true
}
const dialogTitle = ref('')
const editVisible = ref(false)
const createFormData = () => ({
    name: '',
    type: '',
    phone: '',
    remark: '',
})
const formData = ref(createFormData())
const newAction = () => {
    Object.assign(formData.value, createFormData())
    //函数每次创建都是新的函数，所以Object.assign第二个参数是一个初始化的数据对象，会覆盖第一个参数的值
    dialogTitle.value = '新增'
    editVisible.value = true
}
const formDataId = ref('')
const typeData = ref([
    {
        id: 1,
        value: '短信',
    },
    {
        id: 2,
        value: '语音',
    },
])
const edit = (item) => {
    dialogTitle.value = '编辑'
    editVisible.value = true
    formDataId.value = item.id
    Object.assign(formData.value, item)
}
const reg = /^(?:(?:\+|00)86)?1[3-9]\d{9}$/
const validatePass = (rule, value, callback) => {
    if (value === '') {
        callback(new Error('请输入手机号码'))
    } else {
        if (!reg.test(value)) {
            callback(new Error('请输入正确的手机号码'))
        }
        if (formData.value.phone !== '') {
            if (!formTestRef.value) return
            formTestRef.value.validateField('value', () => null)
            callback()
        }
    }
}
const rules = ref({
    phone: [{ required: true, validator: validatePass, trigger: 'blur' }],
})

const formTestRef = ref()
const saveData = () => {
    //保存
    formTestRef.value.validate((valid) => {
        if (valid) {
            if (dialogTitle.value == '新增') {
                communicationAdd({ ...formData.value }).then((res) => {
                    if (res.code == 0) {
                        ElMessage({
                            message: res.msg,
                            type: 'success',
                        })
                        editVisible.value = false
                        getData()
                    } else {
                        ElMessage({
                            message: res.msg,
                            type: 'warning',
                        })
                    }
                })
            } else {
                communicationUpdate({
                    id: formDataId.value,
                    ...formData.value,
                }).then((res) => {
                    if (res.code == 0) {
                        ElMessage({
                            message: res.msg,
                            type: 'success',
                        })
                        editVisible.value = false
                        getData()
                    } else {
                        ElMessage({
                            message: res.msg,
                            type: 'warning',
                        })
                    }
                })
            }
        }
    })
}
const deleteData = (id) => {
    ElMessageBox.confirm('您确定要删除吗?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning',
    })
        .then(() => {
            communicationDel({ id: id }).then((res) => {
                if (res.code == 0) {
                    ElMessage({
                        message: res.msg,
                        type: 'success',
                    })
                    getData()
                } else {
                    ElMessage({
                        message: res.msg,
                        type: 'warning',
                    })
                }
            })
        })
        .catch(() => {
            ElMessage({
                type: 'info',
                message: '已取消',
            })
        })
}
const showtab = ref('2')
const ChangeShowtab = (tab) => {
    showtab.value = tab
}
const ruleFormRef = ref()
const resetForm = (formEl) => {
    if (!formEl) return
    formEl.resetFields()
}
// const closeAction = () => {
//     console.log('关闭')
// }
const updateState = (item) => {
    const data = {
        phone: item.phone,
        type: item.type,
    }
    dataPushtest(data).then((res) => {
        if (res.code == 0) {
            ElMessage({
                message: res.msg,
                type: 'success',
            })
        } else {
            ElMessage({
                message: res.msg,
                type: 'warning',
            })
        }
    })
}
</script>
<template>
    <el-form
        :model="filterForm"
        :inline="true"
        class="dflex white-box"
        ref="ruleFormRef"
    >
        <el-row :gutter="20" class="dflex search">
            <el-form-item prop="name" label="名称:">
                <el-input
                    v-model="filterForm.name"
                    style="width: 200px"
                    placeholder="请输入名称"
                />
            </el-form-item>
            <el-form-item prop="phone" label="手机号:">
                <el-input
                    v-model="filterForm.phone"
                    style="width: 200px"
                    placeholder="请输入手机号码"
                />
            </el-form-item>
            <el-form-item prop="type" label="通讯方式:">
                <el-select
                    v-model="filterForm.type"
                    placeholder="请选择通讯方式"
                >
                    <el-option label="短信" value="1"></el-option>
                    <el-option label="语音" value="2"></el-option>
                </el-select>
            </el-form-item>
        </el-row>
        <el-row :gutter="20">
            <el-button @click="resetForm(ruleFormRef)">重置</el-button>
            <el-button type="primary" @click="searchData">搜索</el-button>
            <!-- <el-button type="primary">更多筛选</el-button> -->
        </el-row>
    </el-form>
    <div class="white-box mt-10 overflow-auto d-flex-1">
        <div class="my-10 fl-bw">
            <div>
                <el-button type="primary" @click="newAction">新增</el-button>
            </div>
            <div class="svgStyle">
                <div
                    v-for="item in 2"
                    :key="item"
                    @click="ChangeShowtab(item)"
                    :style="
                        showtab == item
                            ? 'border-color:var(--el-color-primary)'
                            : ''
                    "
                >
                    <span
                        class="icon"
                        style="font-size: 18px"
                        :style="
                            showtab == item
                                ? 'color:var(--el-color-primary)'
                                : 'color:#c5c6c8'
                        "
                        >{{ item == 1 ? '&#xe60b;' : '&#xe67c;' }}</span
                    >
                </div>
            </div>
        </div>
        <el-empty description="暂无数据" v-if="noData && showtab == 2" />
        <el-row :gutter="20" v-if="showtab == 2">
            <el-col :span="8" v-for="(item, index) in noticeList" :key="index">
                <div class="iot-card">
                    <div class="iot-card-content">
                        <div class="img">
                            <img
                                v-if="item.type == 1"
                                src="../../assets/images/sms.png"
                                alt=""
                            />
                            <img
                                v-else
                                src="../../assets/images/voice.png"
                                alt=""
                            />
                        </div>
                        <div class="details">
                            <h4 class="title">{{ item.name }}</h4>
                            <el-row>
                                <el-col :span="12">
                                    <h5>通知方式</h5>
                                    <p>{{ item.name }}</p>
                                </el-col>
                                <el-col :span="12">
                                    <h5>说明</h5>
                                    <p>{{ item.remark }}</p>
                                </el-col>
                            </el-row>
                        </div>
                        <div class="card-content-bg1"></div>
                        <div class="card-content-bg2"></div>
                    </div>
                    <div class="iot-card-oper">
                        <div class="card-button">
                            <el-button link type="primary" @click="edit(item)">
                                <el-icon class="mr-5"><EditPen /></el-icon>
                                编辑
                            </el-button>
                        </div>
                        <div class="card-button">
                            <el-button link @click="updateState(item)">
                                调试
                            </el-button>
                        </div>

                        <div class="card-button">
                            <el-dropdown @command="handleCommand(item)">
                                <el-button link style="color: #556beb">
                                    通知记录
                                </el-button>
                                <template #dropdown>
                                    <el-dropdown-menu>
                                        <el-dropdown-item command="2"
                                            >通知记录</el-dropdown-item
                                        >
                                    </el-dropdown-menu>
                                </template>
                            </el-dropdown>
                        </div>
                        <div class="card-button delete">
                            <el-button
                                link
                                type="warning"
                                @click="deleteData(item.id)"
                            >
                                <el-icon><Delete /></el-icon>
                            </el-button>
                        </div>
                    </div>
                </div>
            </el-col>
        </el-row>
        <el-table :data="noticeList" style="width: 100%" v-else>
            <el-table-column prop="name" label="名称" />
            <el-table-column prop="phone" label="电话" />
            <el-table-column label="通知方式">
                <template #default="scope">
                    {{ scope.row.type == 1 ? '短信' : '语音' }}
                </template>
            </el-table-column>
            <el-table-column label="操作">
                <template #default="scope">
                    <el-tooltip
                        class="box-item"
                        effect="dark"
                        content="编辑"
                        placement="top"
                    >
                        <el-button
                            :icon="EditPen"
                            circle
                            @click="edit(scope.row)"
                        />
                    </el-tooltip>
                    <el-tooltip
                        class="box-item"
                        effect="dark"
                        content="删除"
                        placement="top"
                    >
                        <el-button
                            :icon="Delete"
                            circle
                            @click="deleteData(scope.row.id)"
                        />
                    </el-tooltip>
                    <!-- <el-tooltip
                            class="box-item"
                            effect="dark"
                            content="其他"
                            placement="top"
                        > -->
                    <el-dropdown @command="handleCommand(scope.row)">
                        <el-button circle class="ml-10">
                            <span class="icon">&#xe63a;</span>
                        </el-button>
                        <template #dropdown>
                            <el-dropdown-menu>
                                <el-dropdown-item command="2"
                                    >通知记录</el-dropdown-item
                                >
                            </el-dropdown-menu>
                        </template>
                    </el-dropdown>

                    <!-- </el-tooltip> -->
                </template>
            </el-table-column>
        </el-table>
        <div class="fl-bw mt-20">
            <div></div>
            <el-pagination
                v-model:current-page="currentPage"
                v-model:page-size="pageSize"
                layout="prev, pager, next, jumper"
                v-model:total="total"
                @current-change="handleCurrentChange"
            />
        </div>
    </div>
    <el-dialog
        v-model="editVisible"
        :title="dialogTitle"
        width="30%"
        align-center
    >
        <el-form
            :model="formData"
            :rules="rules"
            ref="formTestRef"
            label-width="120px"
        >
            <el-form-item label="名称">
                <el-input
                    style="width: 50%"
                    v-model="formData.name"
                    placeholder="请输入名称"
                    clearable
                />
            </el-form-item>
            <el-form-item label="类型">
                <el-select
                    v-model="formData.type"
                    placeholder="请选择类型"
                    style="width: 50%"
                >
                    <el-option
                        v-for="item in typeData"
                        :key="item.id"
                        :label="item.value"
                        :value="item.id"
                    ></el-option>
                </el-select>
            </el-form-item>
            <el-form-item label="手机号" prop="phone">
                <el-input
                    v-model="formData.phone"
                    style="width: 50%"
                    placeholder="请输入手机号码"
                />
            </el-form-item>
            <el-form-item label="说明" prop="remark">
                <el-input
                    v-model="formData.remark"
                    style="width: 50%"
                    placeholder="请输入说明"
                />
            </el-form-item>
            <el-form-item class="footBtn">
                <el-button @click="editVisible = false">取消</el-button>
                <el-button type="primary" @click="saveData"> 确定 </el-button>
            </el-form-item>
        </el-form>
    </el-dialog>
    <el-dialog
        v-model="messageListVisible"
        title="通知记录"
        width="50%"
        align-center
        v-if="messageListVisible"
    >
        <!-- 不使用v-if不会销毁组件 -->
        <messageList :noticeData="noticeData"></messageList>
    </el-dialog>
</template>
<style lang="scss" scoped>
.iot-card-content .img > img {
    width: 100%;
    height: 100%;
}
.card-content-bg2 {
    position: absolute;
    right: -5%;
    height: 100%;
    width: calc(44.65% + 34px);
    top: 0;
    background: linear-gradient(
        188.4deg,
        rgba(102, 102, 102, 0.03) 30%,
        rgba(102, 102, 102, 0) 80%
    );
    transform: skewX(-15deg);
}
.card-content-bg1 {
    position: absolute;
    right: -5%;
    height: 100%;
    width: 44.65%;
    top: 0;
    background: linear-gradient(
        188.4deg,
        rgba(102, 102, 102, 0.03) 30%,
        rgba(102, 102, 102, 0) 80%
    );
    transform: skew(-15deg);
}

.svgStyle {
    display: flex;
    justify-content: space-between;
    align-items: center;
    div {
        margin: auto;
        border: 1px solid #c5c6c8;
        width: 40px;
        height: 40px;
        display: flex;
        align-items: center;
        justify-content: center;
    }
    span {
        cursor: pointer;
    }
}
.footBtn {
    position: relative;
    :deep() .el-form-item__content {
        position: absolute !important;
        right: 0 !important;
    }
}
.flex-1 {
    display: flex;
    justify-content: space-between;
}
.iot-card-content {
    padding: 40px 12px 30px 40px !important;
}
.iot-card {
    .title {
        cursor: pointer;
        font-size: 18px;
        font-weight: 700;
        color: #315efb;
        width: calc(100% - 100px);
        overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis;
    }
    .card-button {
        height: 40px !important;
        button {
            margin-top: 3px;
        }
    }
}
:deep(.search) {
    margin: 0 !important;
    .el-input {
        margin-right: 10px !important;
    }
    .el-form-item {
        margin-bottom: 0;
    }
}
:deep(.el-table .el-table__cell) {
    padding: 20px 0 !important;
}
</style>
